<template>
	<view class="content">
		<input class="search" placeholder="输入商品名搜索" v-model="filter" />
		<button class="add" @click="openPopup">添加商品</button>
		<view class="popup" v-show="popupShow">
			<image class="img" :src="popupData.imgPath"></image>
			<button style="height: 100rpx;margin-top: 10rpx;" @click="chooseImage">添加图片</button>
			<view class="input-item">
				<text>名称:</text>
				<input v-model="popupData.name" />
			</view>
			<view class="input-item">
				<text>进价:</text>
				<input style="width: 100rpx;" type="number" v-model="popupData.buyingPrice" />
				<text>元</text>
			</view>
			<view class="input-item">
				<text>零售价:</text>
				<input style="width: 100rpx;" type="number" v-model="popupData.retailPrice" />
				<text>元</text>
			</view>
			<view class="input-item">
				<text>规格:</text>
				<input style="width: 180rpx;" v-model="popupData.boxSpec" />
			</view>
			<view class="input-item">
				<text>箱规:</text>
				<input style="width: 180rpx;" v-model="popupData.caseSpec" />
			</view>
			<view class="input-item">
				<text>库存:</text>
				<input style="width: 150rpx;" v-model="popupData.stock" />
			</view>
			<view class="input-item" style="border: none;">
				<button @click="confirm">确定</button>
				<button style="margin-left: 50rpx;" @click="cancel">取消</button>
			</view>
		</view>
		<template v-for="(item, index) of filterDataList" :key="index">
			<view class="item" v-show="item.isShow">
				<image class="img" :src="item.imgPath" mode=""></image>
				<view class="info">
					<text>名称：{{item.name}}</text>
					<text>进价：{{item.buyingPrice}}</text>
					<text>零售价：{{item.retailPrice}}</text>
					<text>盒规：{{item.boxSpec}}</text>
					<text>箱规：{{item.caseSpec}}</text>
					<text>库存：{{item.stock}}</text>
				</view>
				<view class="handle">
					<button @click="edit(index)">编辑</button>
					<button style="background-color: #ff6f52;" @click="remove(index)">删除</button>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filter: '',
				lock: true,
				popupShow: false,
				popupData: {
					name: '',
					imgPath: '',
					buyingPrice: null,
					retailPrice: null,
					boxSpec: '',
					caseSpec: '',
					stock: ''
				},
				popupType: 0, //0 add, 1 edit
				dataList: []
			}
		},
		onLoad() {
			this.getData()
		},
		computed: {
			filterDataList() {
				return this.dataList.map(v => {
					if (v.name.includes(this.filter)) v.isShow = true;
					else v.isShow = false;
					return v;
				})
			}
		},
		methods: {
			openPopup() {
				this.popupShow = true;
			},
			confirm() {
				if (this.popupType === 0) this.dataList.unshift(Object.assign({}, this.popupData));
				this.popupShow = false;
				this.popupType = 0;
				this.popupData = {
					name: '',
					imgPath: '',
					buyingPrice: null,
					retailPrice: null,
					boxSpec: '',
					caseSpec: '',
					stock: ''
				}
				this.setData();
			},
			cancel() {
				this.popupData = {
					name: '',
					imgPath: '',
					buyingPrice: null,
					retailPrice: null,
					boxSpec: '',
					caseSpec: '',
					stock: ''
				}
				this.popupShow = false
			},
			edit(index) {
				this.openPopup();
				this.popupType = 1;
				this.popupData = this.dataList[index]
			},
			remove(index) {
				let that = this;
				uni.showModal({
					title: '删除？',
					success(res) {
						if (res.confirm) {
							that.dataList.splice(index, 1);
							that.setData();
						}
					}
				})
			},
			getData() {
				let that = this;
				plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
					// '/storage/emulated/0/' 安卓根目录
					fs.root.getFile('/storage/emulated/0/shangPin.json', {
							create: true
						},
						function(fileEntry) {
							fileEntry.file(function(file) {
								var fileReader = new plus.io.FileReader();
								fileReader.onloadend = function(evt) {
									that.dataList = evt.target.result == '' ? [] : JSON.parse(evt
										.target.result);
									that.lock = false
								}
								fileReader.readAsText(file, 'utf-8');
							});
						})
				})
			},
			setData() {
				let that = this;
				if (that.lock) return;
				that.lock = true;
				plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
					fs.root.getFile('/storage/emulated/0/shangPin.json', {
							create: true
						},
						function(fileEntry) {
							fileEntry.createWriter(function(writer) {
								writer.seek(0);
								writer.write(JSON.stringify(that.dataList));
								writer.onwriteend = function() {
									that.lock = false
								}
							});
						})
				})
			},
			chooseImage() {
				let that = this;
				uni.chooseImage({
					success: res=> {
						uni.saveFile({
							tempFilePath: res.tempFilePaths[0],
							success(res) {
								console.log(res.savedFilePath)
								that.popupData.imgPath = res.savedFilePath
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fafafa;
	}

	.content {
		width: 750rpx;
		padding: 10rpx;
		padding-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.search {
		width: 500rpx;
		height: 70rpx;
		font-size: 30rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	button {
		background-color: #c1dcff;
	}

	.add {
		width: 500rpx;
		height: 70rpx;
		font-size: 30rpx;
		margin: 50rpx 0;
	}

	.popup {
		width: 700rpx;
		height: 1400rpx;
		padding-top: 50rpx;
		position: fixed;
		top: 50rpx;
		background-color: #ffffff;
		border: 1rpx solid #d0d0d0;
		border-radius: 10rpx;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.input-item {
		padding: 10rpx;
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 5rpx;
	}

	.input-item input {
		margin-left: 10rpx;
		background-color: #f5f5f5;
		border-top: 1rpx solid #e2e2e2;
		border-radius: 5rpx;
	}

	.img {
		width: 180rpx;
		height: 200rpx;
		border: 1rpx solid #e2e2e2;
		flex-shrink: 0;
	}

	.item {
		width: 700rpx;
		height: 200rpx;
		color: #8f8f94;
		border-top: 1rpx solid #a2b8ff;
		display: flex;
	}

	.info {
		width: 400rpx;
		display: flex;
		flex-direction: column;
		padding: 10rpx 0 0 50rpx;
	}

	.info text {
		width: 300rpx;
		font-size: 23rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.handle {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.handle button {
		width: 100rpx;
		height: 65rpx;
		padding: 0;
		font-size: 22rpx;
	}
</style>
